<template>
    <div>
        <!-- 导航面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 添加角色 -->
        <el-button type="success" plain @click='showaddRolue'>添加角色</el-button>
        <!-- 表单 -->
        <el-table :data="RouleData" border style="width: 100%;margin-top:15px">
            <!-- 展开行 -->
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <!-- 展开行内容 -->
                    <el-row v-for="frist in scope.row.children" :key="frist.id" style='margin-bottom:10px'>
                        <el-col :span="4">
                            <div class="grid-content bg-purple-dark">
                                <el-tag closable type="success" @close='deletuserrole(scope.row,frist.id)'>
                                    {{frist.authName}}
                                </el-tag>
                            </div>
                        </el-col>
                        <el-col :span="20">
                            <el-row v-for="second in frist.children" :key="second.id" style='margin-bottom:10px'>
                                <el-col :span="4">
                                    <div class="grid-content bg-purple-dark">
                                        <el-tag closable type="warning" @close='deletuserrole(scope.row,second.id)'>
                                            {{second.authName}}
                                        </el-tag>
                                    </div>
                                </el-col>
                                <el-col :span="20">
                                    <div class="grid-content bg-purple-dark">
                                        <el-tag style='margin-left:5px' v-for="third in second.children" :key="third.id" closable type="danger" @close='deletuserrole(scope.row,third.id)'>
                                            {{third.authName}}
                                        </el-tag>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    <!-- 判断是否有内容 -->
                    <span v-if='scope.row.children.length===0'>该角色暂时没有任何权限</span>
                </template>
            </el-table-column>
            <!-- 列表序号 -->
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column prop="roleName" label="角色名称" width="300">
            </el-table-column>
            <el-table-column prop="roleDesc" label="描述" width="300">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-tooltip content="编辑" placement="top">
                        <el-button type="primary" icon="el-icon-edit"></el-button>
                    </el-tooltip>
                    <el-tooltip content="删除" placement="top">
                        <el-button type="primary" icon="el-icon-delete"></el-button>
                    </el-tooltip>
                    <el-tooltip content="分配权限" placement="top">
                        <el-button type="primary" icon="el-icon-check" @click='getrouleList(scope.row)'></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分配权限表单 -->
        <el-dialog title="分配权限" :visible.sync="rouledialogFormVisible" >
            <!-- 树形控件 -->
            <el-tree :data="allRightdata" show-checkbox node-key="id"  :default-checked-keys="checkedRightdata" ref="tree" :default-expand-all='true' :props="defaultProps" style='height:200px;overflow: auto'>
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="rouledialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="grandRightsubmit">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 添加角色框 -->
         <el-dialog title="添加角色" :visible.sync="addRoluedialogFormVisible">
        <el-form :model="addRolueform" :rules="rules" ref="addRolueform" >
          <el-form-item label="角色名称"  prop='roleName' label-width="80px">
            <el-input v-model="addRolueform.roleName" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色描述"  prop='roleDesc' label-width="80px">
            <el-input v-model="addRolueform.roleDesc" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addRoluedialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitaddRolueForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import { getroles, deleteUserRole, getallrightList, setuserRight, addUserright } from '@/api/index.js'
export default {
  data () {
    return {
      // 获取角色列表
      RouleData: [],
      rouledialogFormVisible: false,
      //   权限数据
      allRightdata: [],
      //   选中的权限
      checkedRightdata: [],
      //   角色id
      roleid: '',
      defaultProps: {
        children: 'children',
        // 此属性要绑定父属性才能显示数据
        label: 'authName'
      },
      // 添加角色显示框
      addRoluedialogFormVisible: false,
      // 添加角色数组
      addRolueform: {
        roleName: '',
        roleDesc: ''
      },
      // 添加用户的表单验证
      rules: {
        roleName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        roleDesc: [{}]
      }
    }
  },
  mounted () {
    // 获取角色列表
    this.initList()
  },
  methods: {
    // 显示添加角色框
    showaddRolue () {
      this.addRoluedialogFormVisible = true
    },
    // 角色添加
    submitaddRolueForm () {
      // console.log(this.addRolueform.roleName)
      addUserright({roleName: this.addRolueform.roleName, roleDesc: this.addRolueform.roleDesc}).then((res) => {
        // console.log(res)
        if (res.meta.status === 201) {
          //  提示用户
          this.$message({
            message: res.meta.msg,
            type: 'success'
          })
          //   刷新页面
          this.initList()
        } else {
          //  失败，提示用户
          this.$message({
            message: res.meta.msg,
            type: 'error'
          })
        }
        //   关闭授权表单
        this.addRoluedialogFormVisible = false
        this.addRolueform.roleName = ''
        this.addRolueform.roleDesc = ''
      })
    },
    //   角色授权
    grandRightsubmit () {
      // 角色授权需要roleId和rids，且rids需要以‘,’分割字符串的形式传递参数；roleid已在点击显示列表时以赋值，此处主要处理获取rids---它存储在pid中
    //   使用组件提供的获取和设置选中节点的方法this.$refs.tree.getCheckedNodes()
      // console.log(this.$refs.tree.getCheckedNodes())
      //   获取this.$refs.tree.getCheckedNodes()的数组，参数存储在数组里的id和pid中
      var nodesArr = this.$refs.tree.getCheckedNodes()
      //   使用数组map方法对nodesArr将id和pid进行合并‘,’连接成新数组,
      //   打印出来：["105,104,101", "117,104,101"]
      var idArr = nodesArr.map((value) => {
        return value.id + ',' + value.pid
      })
      // console.log(idArr)
      //   将idArr数组用,连接成字符串,打印出来的数据：105,104,101,117,104,101
      var strArr = idArr.join(',')
      // console.log(strArr)
      // 字符串方法：用split方法将字符串以,分割为数组,打印出来数据：["105", "104", "101", "117", "104", "101"]
      var ridsArr = strArr.split(',')
      // console.log(ridsArr)
      //   将ridsArr数组去重--使用es6语法的set方法，获取的是对象{"105", "104", "101", "117"}
      var tempSet = new Set(ridsArr)
      // console.log(tempSet)
      //   ES6为Array增加了from函数用来将ridsArr对象转换成数组。打印数据["105", "104", "101", "117"]
      var lastArr = Array.from(tempSet)
      // console.log(lastArr)
      //   将数组转化为字符串用,连接,打印数据：105,104,101,117
      var rids = lastArr.join(',')
      // console.log(rids)
      //   调用接口，为角色授权
      setuserRight({roleid: this.roleid, rids: rids}).then((res) => {
        // console.log(res)
        if (res.meta.status === 200) {
          //  提示用户
          this.$message({
            message: res.meta.msg,
            type: 'success'
          })
          //   关闭授权表单
          this.rouledialogFormVisible = false
          //   刷新页面
          this.initList()
        } else {
          //  失败，提示用户
          this.$message({
            message: res.meta.msg,
            type: 'error'
          })
        }
      })
    },
    //   删除角色权限
    deletuserrole (row, rightid) {
      // 发送删除权限请求
      deleteUserRole(row.id, rightid).then(res => {
        // console.log(res)
        if (res.meta.status === 200) {
          //  提示用户
          this.$message({
            message: res.meta.msg,
            type: 'success'
          })
          //   将返回的res.data赋值给row.children，重新渲染数据，这样可以不用重新整个页面刷新
          row.children = res.data
        } else {
          //  失败，提示用户
          this.$message({
            message: res.meta.msg,
            type: 'error'
          })
        }
      })
    },
    // 显示分配权限表单
    getrouleList (row) {
      // 显示表单
      this.rouledialogFormVisible = true
      //   发送请求，渲染树形图
      getallrightList('tree ').then((res) => {
        // console.log(res)
        if (res.meta.status === 200) {
          // 赋值给权限数据,展示树形
          this.allRightdata = res.data
          //   通过此前渲染展开功能显示权限数据返回获取该用户的权限，然后在树形图中选中,因为树形选中只要选中一个子元素，父节点会自动选中，所有要找到最后权限的id
          //   console.log(row.children.length)
          // 赋值角色id---用于授权角色时使用
          this.roleid = row.id
          //   先清空选中树形
          //   this.$refs.tree.setCheckedKeys([])
          this.checkedRightdata.length = 0
          //   判断数组是否存在
          if (row.children.length > 0) {
            // console.log('123')
            // 遍历此数组，找到权限
            row.children.forEach((first) => {
              // 判断数组是否存在
              if (first.children.length > 0) {
                // console.log('456')
                first.children.forEach((second) => {
                  if (second.children.length > 0) {
                    // console.log('789')
                    second.children.forEach((third) => {
                      // 将此id赋值给checkedRightdata数组，进行选中
                    //   console.log(third.id)
                      this.checkedRightdata.push(third.id)
                    })
                  }
                })
              }
            })
          }
        }
      })
    },
    // 获取角色列表数据
    initList () {
      //   获取角色列表
      getroles().then(res => {
        // console.log(res.data)
        this.RouleData = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-breadcrumb {
  background-color: #f5f5f5;
  height: 45px;
  font-size: 15px;
  padding-left: 10px;
  line-height: 45px;
  margin-bottom: 15px;
}
</style>
